import React, { Component } from "react";
import PropTypes from "prop-types";
// 使用nanoid库生成一个全球的唯一uuid
import { nanoid } from "nanoid";
import headercss from "./index.module.css";

export default class index extends Component {
  // 对传递过来的prop进行数据类型限制
  static propTypes = {
    addTodo: PropTypes.func.isRequired,
  };

  // 顶部输入框键盘弹起事件
  handerKeyUp = (event) => {
    const { keyCode, target } = event;
    // 判断是否按下的是回车
    if (keyCode !== 13) return;
    // 当前输入的值
    if (target.value.trim() === "") {
      alert("请输入待办项目");
      return;
    }
    // 封装一个代办对象
    let todoObj = {
      id: nanoid(),
      name: target.value,
      done: false,
    };
    // 调用父组件传递过来的方法给App组件传值
    this.props.addTodo(todoObj);
    // 清空输入框
    target.value = "";
  };

  render() {
    return (
      <div className={headercss.headerMain}>
        <input
          onKeyUp={this.handerKeyUp}
          type="text"
          placeholder="请输入代办事项，按回车确定"
        />
      </div>
    );
  }
}
